{% extends 'layout.html' %}

{% load static %}

{% block content %}
    {% comment %}style{% endcomment %}
    <style>
        table {
            width: 100%;
            word-break: break-word;
        }

        table > thead {
            word-break: keep-all;
        }
    </style>

    {% comment %}path{% endcomment %}
    <ol class="breadcrumb">
        <li><a href="/#">Home</a></li>
        <li class="active">All Messages</li>
    </ol>
    {% comment %}content{% endcomment %}
    <div class="loading row">
        <div class="col-md-4 col-md-offset-4">
            <img src="{% static 'img/loading.gif' %}" alt="loading" style="width: 100%;">
        </div>
    </div>
    <div class="empty" style="display: none;">
        <div class="col-md-4 col-md-offset-4">
            <img src="{% static 'img/empty.png' %}" alt="loading" style="width: 100%;">
        </div>
    </div>
    <div class="messages" style="display: none;">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>No</th>
                <th>From</th>
                <th>Message</th>
                <th>DateTime</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    {% comment %}javascript{% endcomment %}
    <script>
        $(function () {
            let number = $.getUrlParam('number');
            if (number === null) {
                alert('Missing parameter number.')
                return false;
            }
            $.get('/api/messages/' + number, function (e) {
                $('.loading').hide();
                if (Array.isArray(e) === false) {
                    alert(e);
                    $('.empty').show();
                    return false;
                }
                $('.messages').show();
                let messages = $('.messages>table>tbody');
                let no = 1;
                $.each(e, function (index, item) {
                    let number_match = item.message.match(/\d+/g);
                    let number_max_length = 0;
                    let number_max_length_index = -1;
                    $.each(number_match, function (index, item) {
                        if (number_max_length < item.length) {
                            number_max_length = item.length;
                            number_max_length_index = index;
                        }
                    })
                    if (number_max_length_index !== -1 && number_max_length >= 4) {
                        let number = number_match[number_max_length_index];
                        let number_html = '<code>' + number + '</code>';
                        item.message = item.message.replace(number, number_html);
                    }
                    item.time = '<small>' + item.time + '</small>';
                    let html = '<tr>' +
                        '<td>' + no + '</td>' +
                        '<td>' + item.from + '</td>' +
                        '<td>' + item.message + '</td>' +
                        '<td>' + item.time + '</td>' +
                        '</tr>';
                    no += 1;
                    messages.append(html);
                })
            })
        })
    </script>

{% endblock %}
